<template>
	<view class="container">
		<view class="withdrawal-box">
			<view class="box-title f-c-between">
				<view>请输入提现金额</view>
				<view>手续费：{{money.commission}}</view>
				<view>到账：{{money.realAccount}}</view>
			</view>
			<view class="input-box">
				<u-input v-model.trim="amount" type="digit" border="bottom" focus clearable fontSize="60rpx" color="#FF6413"
					:customStyle="{padding:'6rpx 0'}">
					<span slot="prefix" class="symbol">¥</span>
				</u-input>
			</view>
			<view class="money-tips">余额¥{{userInfo.money||0}}</view>
			<view v-if="overPrice" class="money-tips over">输入金额超过余额</view>
		</view>

		<view class="type-box">
			<view class="box-title">提现方式</view>
			<view class="type-item f-c-between">
				<view class="f-a-center">
					<u-icon name="weixin-fill" color="#00C800" size="28"></u-icon>
					<span class="pay-title">微信</span>
				</view>
				<image src="/static/home/icon-selected.png" class="icon-selected"></image>
			</view>
		</view>

		<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle" class="btn-withdrawal"
			@click="btnWithdrawal">提现</u-button>

		<view class="rule-box f-a-start">
			<view class="rule-title">提现规则：</view>
			<view class="rule-list">
				1、零钱提现最低为1元，最高200元。<br />
				2、提现手续费为0.6%。<br />
				3、每日最多提现10次。<br />
				4、提现后1个工作日内到账。
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP
	// import {
	// 	requestMerchantTransfer
	// } from "@/uni_modules/uni-requestMerchantTransfer"
	// #endif

	export default {
		data() {
			return {
				fromType: 'withdrawal', //app 
				amount: '',
				money: {
					commission: 0,
					realAccount: 0
				},
				overPrice: false,
				customButtonStyle: {
					marginTop: '44rpx',
					fontSize: '34rpx'
				}
			}
		},
		watch: {
			amount(newVal, oldVal) {
				if (this.$u.test.amount(newVal)) {
					this.overPrice = (parseFloat(newVal) > parseFloat(this.userInfo.money || 0) ? true : false)
					let commission = Math.trunc((parseFloat(newVal) * 0.006) * 100) / 100 //保留2位小数，其余的舍掉
					let realAccount = parseFloat(newVal) - parseFloat(commission)
					this.money = {
						commission,
						realAccount
					}
				} else {
					this.overPrice = false
					this.money = {
						commission: 0,
						realAccount: 0
					}
				}
			}
		},
		computed: {},
		onLoad(option) {
			if (option.from == 'app') {
				this.fromType = option.from
				this.amount = option.amount
				this.btnWithdrawal()
			}
		},
		methods: {
			//提现
			btnWithdrawal() {
				if (parseFloat(this.userInfo.money) == 0) {
					this.$showToast('您当前余额为0')
					return
				}
				if (!this.$u.test.amount(this.amount)) {
					this.$showToast('请输入正确的金额')
					return
				}
				if (parseFloat(this.amount) < 1) {
					this.$showToast('提现金额最低为1元')
					return
				}

				if (parseFloat(this.amount) > 200) {
					this.$showToast('提现金额最高为200元')
					return
				}
				this.$u.debounce(() => {
					this.$api.get_wechat_withdraw({
						// #ifdef APP-PLUS
						client_type: 'Wechat', //因为要跳转带微信小程序，
						// #endif
						// #ifdef MP-WEIXIN
						client_type: 'Wechat',
						// #endif
						amount: this.amount,
					}).then(res => {
						if (res.state == 'WAIT_USER_CONFIRM') {
							// #ifdef APP
							// requestMerchantTransfer({
							// 	"mchId": "1717292533",
							// 	"appId": "wx08f2e4c503b9c91c", //商户 appId
							// 	"package": res.package_info,
							// 	success: (res) => {
							// 		this.withdrawerCallBack()
							// 	},
							// 	fail: (res) => {
							// 		console.log(res.errMsg)
							// 	}
							// })
							this.navigatorWxPay()
							// #endif

							// #ifdef MP-WEIXIN
							wx.requestMerchantTransfer({
								"mchId": "1717292533",
								"appId": "wx3fd4086b66bc3069", //小程序的
								"package": res.package_info,
								success: (res) => {
									this.withdrawerCallBack()
								},
								fail: (res) => {
									console.log(res.errMsg)
								}
							})
							// #endif
						}
					})
				}, 300)
			},

			//跳转到微信
			navigatorWxPay() {
				let params = {
					from: 'app',
					token: this.token,
					amount: this.amount,
					pageType: 'withdrawal',
				}
				this.$util.navigatorWxProgramUtil(params)
			},

			//回调
			withdrawerCallBack() {
				if (this.fromType == 'app') {
					this.$showToast('提现成功')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/index'
						})
					}, 800)
				} else {
					this.$store.dispatch('get_userInfo')
					this.$showToast('提现成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				}
			},

			//获取登录code
			getLoginCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						success: res => {
							console.log('获取到微信code', res.code);
							resolve(res.code);
						},
						fail(err) {
							console.log('微信登录失败', err);
							reject(err);
						}
					})
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 44rpx;
	}

	.withdrawal-box {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 22rpx 40rpx 44rpx 36rpx;

		.box-title {
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 0.8);
		}

		.input-box {
			padding: 28rpx 5rpx 0;

			.symbol {
				font-weight: 400;
				font-size: 36rpx;
				color: #FF6413;
				padding-top: 18rpx;
			}
		}

		.money-tips {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.4);
			color: rgba(51, 51, 51, 0.8);
			margin-top: 16rpx;
			padding-left: 5rpx;

			&.over {
				color: #FF6413;
			}
		}

	}

	.type-box {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 18rpx 44rpx 52rpx 36rpx;
		margin-top: 28rpx;

		.box-title {
			font-weight: 400;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.3);
			color: #333333;
			margin-bottom: 32rpx;
		}

		.pay-title {
			font-weight: 400;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.3);
			color: #333333;
			margin-left: 20rpx;
		}

		.icon-selected {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.btn-withdrawal {
		margin-top: 44rpx;
	}

	.rule-box {
		margin-top: 44rpx;
		padding-left: 34rpx;

		.rule-title {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.4);
			color: #666666;
			margin-right: 10rpx;
		}

		.rule-list {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.4);
			color: #9DA3B4;
		}
	}
</style>